#{include file="../Header.html"}
<style>
    .layui-layer-page .layui-layer-content {
        position: relative !important;
        overflow: auto !important;
    }

    .user_level_div .bootstrap-table {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .user_level_div .bootstrap-table .fixed-table-toolbar::after {
        clear: none !important;
        display: none;
    }

    .user_level_div .bootstrap-table .fixed-table-container {
        clear: none !important;
    }
</style>

<!--begin::Content-->
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
    <!--begin::Toolbar-->
    #{include file="../Toolbar.html"}
    <!--end::Toolbar-->
    <!--begin::Post-->
    <div class="post d-flex flex-column-fluid" id="kt_post">
        <!--begin::Container-->
        <div id="kt_content_container" class="container-fluid">
            <!--begin::Tables Widget 9-->
            <div class="card mb-5 mb-xl-8">
                <!--begin::Header-->
                <div class="card-header border-0 pt-5">
                    <div class="card-toolbar">
                        <button class="btn btn-sm btn-light-primary btn-app-create me-3"><i class="fas fa-plus"></i>
                            添加分类
                        </button>
                        <button class="btn btn-sm btn-light-success start me-3"><i class="fas fa-cloud-upload-alt"></i>
                            启用选中分类
                        </button>
                        <button class="btn btn-sm btn-light-dark stop me-3"><i class="fas fa-cloud-download-alt"></i>
                            停用选中分类
                        </button>
                        <button class="btn btn-sm btn-light-danger btn-app-del me-3"><i class="fas fa-trash"></i> 移除选中分类
                        </button>
                        <!--start::HOOK-->
                        #{hook(\App\Consts\Hook::ADMIN_VIEW_CATEGORY_TOOLBAR)}
                        <!--end::HOOK-->
                    </div>
                </div>
                <!--end::Header-->

                <div class="card-body py-3">
                    <form class="search-query"></form>
                    <table id="category" lay-filter="category"></table>
                </div>
            </div>

            <!--end::Tables Widget 9-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Post-->
</div>
<!--end::Content-->

<script>

    $(function () {
        layui.use(['hex'], function () {
            let table = $("#category");
            var cao = layui.hex;


            let queryParams = null;
            table.bootstrapTable({
                url: '/admin/api/category/data',//请求的url地址
                method: "post",//请求方式
                // striped:true,//是否显示行间隔色
                pageSize: 15,//每页显示的数量
                pageList: [15, 25, 50, 100, 500, 1000, 2000],
                showRefresh: false,//是否显示刷新按钮
                cache: false,//是否使用缓存
                showToggle: false,//是否显示详细视图和列表视图的切换按钮
                cardView: false,
                pagination: true,//是否显示分页
                pageNumber: 1,//初始化显示第几页，默认第1页
                singleSelect: false,//复选框只能选择一条记录
                sidePagination: 'server',//分页显示方式，可以选择客户端和服务端（server|client）
                contentType: "application/x-www-form-urlencoded",//使用post请求时必须加上
                dataType: "json",//接收的数据类型
                queryParamsType: 'limit',//参数格式，发送标准的Restful类型的请求
                queryParams: function (params) {
                    params.page = (params.offset / params.limit) + 1;
                    if (queryParams) {
                        for (const key in params) {
                            queryParams[key] = params[key];
                        }
                    } else {
                        queryParams = params;
                    }
                    return queryParams;
                },
                //回调函数
                responseHandler: function (res) {
                    return {
                        "total": res.count,
                        "rows": res.data
                    }
                },
                columns: [
                    {checkbox: true}
                    , {
                        field: 'owner', title: '创建者', formatter: function (val, item) {
                            if (!item.owner) {
                                return '<span class="badge badge-light-success owner" style="cursor: pointer;" >主站自营</span>';
                            }
                            return '<span class="badge badge-light-dark owner" style="cursor: pointer;" ><img src="' + item.owner.avatar + '"  style="width: 18px;border-radius: 100%;"/> ' + item.owner.username + '(' + item.owner.id + ')</span>'
                        }, events: {
                            'click .owner': function (event, value, row, index) {
                                let id = row.owner ? row.owner.id : 0;
                                $("input[name='equal-owner']").val(id);
                                table.bootstrapTable('refresh', {
                                    silent: true,
                                    pageNumber: 1,
                                    query: {"equal-owner": id}
                                });
                            }
                        }
                    }
                    , {
                        field: 'icon', title: '分类', formatter: function (val, item) {
                            let icon = item.icon;

                            if (!item.icon) {
                                icon = '/favicon.ico';
                            }

                            return '<span class="btn-badge badge-light" style="cursor: pointer;" ><img src="' + icon + '"  style="width: 18px;border-radius: 100%;"/> ' + item.name + '</span>'
                        }
                    }
                    , {field: 'sort', title: '排序(越小越前)'}
                    , {
                        field: 'share_url', title: '推广链接', formatter: function (val, item) {
                            return '<span  class="badge badge-light clipboard clipboard-' + item.id + '" data-clipboard-text="' + item.share_url + '" style="cursor: pointer;">复制</span>';
                        }
                        , events: {
                            'click .clipboard': function (event, value, row, index) {
                                let clipboard = new ClipboardJS(".clipboard-" + row.id);
                                clipboard.on('success', function (e) {
                                    layer.msg("分享链接已经复制成功了，赶快发给好友吧！");
                                });
                            }
                        }
                    }


                    , {
                        field: 'hide', title: '显示', formatter: function (val, item) {
                            if (item.hide == 0) {
                                return '<span class="badge badge-light-success"><i class="fas fa-eye text-success"></i> 显示</span>';
                            }
                            return '<span class="badge badge-light"><i class="fas fa-eye-slash"></i> 隐藏</span>';
                        }
                    }
                    , {
                        field: 'status', title: '状态', formatter: function (val, item) {
                            if (item.status == 1) {
                                return '<span class="badge badge-light-success"><i class="fas fa-play-circle text-success"></i> 启用</span>';
                            }
                            return '<span class="badge badge-light-danger"><i class="fas fa-stop-circle text-danger"></i> 未启用</span>';
                        }
                    },
                    <!--start::HOOK-->
                    #{hook(\App\Consts\Hook::ADMIN_VIEW_CATEGORY_TABLE)}
                    <!--end::HOOK-->
                    {
                        field: 'operate',
                        title: '操作',
                        formatter: function (val, item) {
                            let html = '<button type="button"  class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1 edit"><i class="fa fa-edit"></i></button> ';
                            if (item.status == 0) {
                                html += '<button type="button"  class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1 start"><i class="fa fa-play" style="color: #61ff61;"></i></button> ';
                            } else {
                                html += '<button type="button"  class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1 stop"><i class="fa fa-pause" style="color: #fdbea7;"></i></button> ';
                            }
                            html += '<button type="button"  class="btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1 del"><i class="fas fa-trash"></i></button> ';
                            return html;
                        },
                        events: {
                            'click .edit': function (event, value, row, index) {
                                modal(row);
                            },
                            'click .del': function (event, value, row, index) {
                                layer.confirm('您正在移除该分类，是否要继续？', {
                                    btn: ['确认移除', '取消']
                                }, function () {
                                    $.post('/admin/api/category/del', {list: [row.id]}, res => {
                                        layer.msg(res.msg);
                                        table.bootstrapTable('refresh', {silent: true});
                                    });
                                });
                            },
                            'click .start': function (event, value, row, index) {
                                $.post('/admin/api/category/save', {id: row.id, status: 1}, res => {
                                    layer.msg(res.msg);
                                    table.bootstrapTable('refresh', {silent: true});
                                });
                            },
                            'click .stop': function (event, value, row, index) {
                                $.post('/admin/api/category/save', {id: row.id, status: 0}, res => {
                                    layer.msg(res.msg);
                                    table.bootstrapTable('refresh', {silent: true});
                                });
                            }
                        }
                    }
                ]
            });

            let modal = (values = {}) => {
                cao.popup('/admin/api/category/save', [
                    {title: "分类图标", name: "icon", type: "image", placeholder: "请选择图片(推荐64*64)", width: 100},
                    {title: "分类名称", name: "name", type: "input", placeholder: "请输入分类名称"},
                    {title: "分类排序", name: "sort", type: "input", placeholder: "值越小，排名越靠前哦~"},
                    {
                        title: "隐藏分类",
                        name: "hide",
                        type: "switch",
                        text: "是",
                        default: 0,
                        tips: "隐藏分类后，游客将看不见该分类，但你可以通过下面的《会员配置》来进行对指定的会员等级显示。"
                    },
                    {
                        title: "会员配置",
                        name: "user_level_config",
                        type: "textarea",
                        hide: true
                    },
                    {
                        title: "会员配置",
                        name: "user_level_config_table",
                        type: "explain",
                        placeholder: '<div class="user_level_div"><table class="user_level_table"></table></div>'
                    },
                    {title: "状态", name: "status", type: "switch", text: "启用"},
                    #{hook(\App\Consts\Hook::ADMIN_VIEW_CATEGORY_POST)}
                ], res => {
                    table.bootstrapTable('refresh', {silent: true});
                }, values, ["720px", "780px"], false, "添加", unqueId => {
                    let queryParamsLevel = null;


                    let userLevelConfig = cao.popupElement("user_level_config", "textarea", unqueId);
                    userLevelConfig.parent().parent().hide();


                    $('.user_level_table').bootstrapTable({
                        url: '/admin/api/group/data',//请求的url地址
                        method: "post",//请求方式
                        // striped:true,//是否显示行间隔色
                        pageSize: 500,//每页显示的数量
                        showRefresh: false,//是否显示刷新按钮
                        cache: false,//是否使用缓存
                        showToggle: false,//是否显示详细视图和列表视图的切换按钮
                        cardView: false,
                        pagination: false,//是否显示分页
                        pageNumber: 1,//初始化显示第几页，默认第1页
                        singleSelect: false,//复选框只能选择一条记录
                        sidePagination: 'server',//分页显示方式，可以选择客户端和服务端（server|client）
                        contentType: "application/x-www-form-urlencoded",//使用post请求时必须加上
                        dataType: "json",//接收的数据类型
                        queryParamsType: 'limit',//参数格式，发送标准的Restful类型的请求
                        queryParams: function (params) {
                            params.page = (params.offset / params.limit) + 1;
                            if (queryParamsLevel) {
                                for (const key in params) {
                                    queryParamsLevel[key] = params[key];
                                }
                            } else {
                                queryParamsLevel = params;
                            }
                            return queryParamsLevel;
                        },
                        //回调函数
                        responseHandler: function (res) {
                            return {
                                "total": res.count,
                                "rows": res.data
                            }
                        },
                        columns: [
                            {
                                field: "icon", title: "LOGO", formatter: function (val, item) {
                                    if (!item.icon) {
                                        return "-";
                                    }
                                    return '<img src="' + item.icon + '"  style="height: 32px;"/>';
                                }
                            },
                            {
                                field: "name", title: "等级", formatter: function (val, item) {
                                    return '<span class="badge badge-light">' + item.name + '</span>'
                                }
                            },
                            {
                                field: 'operate',
                                title: '配置',
                                formatter: function (val, item) {
                                    return '<span class="config-btn" style="cursor: pointer"><i class="fas fa-cog text-primary"></i></span>';
                                },
                                events: {
                                    'click .config-btn': function (event, value, row, index) {
                                        userLevelModal(row, userLevelConfig);
                                    }
                                }
                            }
                        ]
                    });
                });
            }

            let userLevelModal = (values = {}, userLevelConfig) => {
                let userLevelConfigJson = {};
                try {
                    userLevelConfigJson = JSON.parse(decodeURIComponent(userLevelConfig.val()));
                } catch (e) {
                }

                if (userLevelConfigJson.hasOwnProperty(values.id)) {
                    values.show = userLevelConfigJson[values.id].show;
                }

                cao.popup((res, index) => {
                    //初始化
                    userLevelConfigJson[res.id] = {};
                    userLevelConfigJson[res.id]["show"] = parseInt(res.show);
                    userLevelConfig.val(encodeURIComponent(JSON.stringify(userLevelConfigJson)));
                    layer.close(index);
                }, [
                    {
                        title: "显示分类",
                        name: "show",
                        type: "switch",
                        text: "是",
                        tips: "当某个分类被隐藏时，你可以通过这个选项开对某个会员等级进行显示。"
                    }
                ], res => {
                    table.bootstrapTable('refresh', {silent: true});
                }, values, "460px", false, values.name + ' - 配置');
            }

            $('.btn-app-create').click(function () {
                modal();
            });

            $('.btn-app-del').click(() => {
                var data = cao.listObjectToArray(table.bootstrapTable('getSelections'));
                if (data.length == 0) {
                    layer.msg("请至少勾选1个商品分类进行操作！");
                    return;
                }
                layer.confirm('您确定要删除已经选中的商品分类吗？这是不可恢复的操作！', {
                    btn: ['确定', '取消']
                }, function () {
                    $.post("/admin/api/category/del", {list: data}, res => {
                        layer.msg(res.msg);
                        table.bootstrapTable('refresh', {silent: true});
                    });
                });
            });

            $('.start').click(() => {
                let data = cao.listObjectToArray(table.bootstrapTable('getSelections'));
                if (data.length == 0) {
                    layer.msg("请至少勾选1个分类进行操作！");
                    return;
                }

                layer.confirm('您确定要启用选中的分类吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.post("/admin/api/category/status", {list: data, status: 1}, res => {
                        layer.msg(res.msg);
                        table.bootstrapTable('refresh', {silent: true});
                    });
                });
            });

            $('.stop').click(() => {
                let data = cao.listObjectToArray(table.bootstrapTable('getSelections'));
                if (data.length == 0) {
                    layer.msg("请至少勾选1个分类进行操作！");
                    return;
                }
                layer.confirm('您确定要停用选中的分类吗？', {
                    btn: ['确定', '取消']
                }, function () {
                    $.post("/admin/api/category/status", {list: data, status: 0}, res => {
                        layer.msg(res.msg);
                        table.bootstrapTable('refresh', {silent: true});
                    });
                });
            });

            cao.query('.search-query', table, [
                {title: "分类名称", name: "search-name", type: "input"},
                {
                    title: "状态", name: "equal-status", type: "select", dict: [
                        {id: 0, name: "停用"},
                        {id: 1, name: "启用"}
                    ]
                },
                {title: "会员ID，0=系统", name: "equal-owner", type: "input"}
            ], true, false);
        });
    });
</script>

#{include file="../Footer.html"}